<template>
  <div class="">
    <div v-if="videoUrl == ''" class="text-center flex flex-col justify-center"  :style="{ height: 'calc(634px)', width: 'calc(100%)' }">
      <img  src="@/assets/screenimg/vievo.png" alt="" class="mx-auto"></img>
      <div>
        未配置监控视频
      </div>
      
    </div>
    <div v-else id="mse" class="!w-full !h-full aspect-video"></div>
  </div>
</template>
<script setup lang="ts">
import { getDeviceVideo } from '@/api/screen/index'
import Player,{ Events } from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const videoUrl = ref('')
const playDuration = ref()
const timer = ref(null)
onMounted(() => {
  getData()
})
const getData = async () => {
  const res = await getDeviceVideo({ deviceId: props.id })
  videoUrl.value = res.result.url
  playDuration.value = res.result.playDuration
  if (res.result.url != '') {
    const player = new Player({
      id: 'mse',
      url: videoUrl.value,
      plugins: [HlsPlugin],
    })
    if (playDuration.value) {
          player.on(Events.PLAY, () => {
            timer.value && clearTimeout(timer.value)
            timer.value = setTimeout(() => {
       
        player.pause()
      }, playDuration.value * 60 * 1000);
    })
    }

  }
}

onBeforeUnmount(() => {
	timer.value && clearTimeout(timer.value)
});
</script>